<template>
	<view>
		<van-popup  position="bottom" safe-area-inset-bottom close-on-click-overlay="guanbi" :show="show" :round="round">
			<view>
				<view style="width: 750rpx;height:600rpx ;border-radius: 18rpx;background: #FFFFFF;box-sizing: border-box;padding: 40rpx;display: flex;flex-direction: column;align-items: center;z-index: 1212121212121;">
					<view style="font-size: 40rpx;font-weight: bold;">确认支付</view>
					<view style="height: 2rpx;width: 100%;background: #EE7B30;margin: 20rpx 0;"></view>
					<view>
						<text>￥</text>
						<text>{{originalPrice}}</text>
					</view>
					<view style="height: 2rpx;width: 100%;background: #EE7B30;margin: 20rpx 0;"></view>
					<view v-if="zhifu_list.length != 0">
						<view style="font-size: 35rpx;font-weight: bold;">优惠券支付</view>
						<view style="height: 2rpx;width: 100%;background: #EE7B30;margin: 20rpx 0;"></view>
						<view>
							<view class="list_tan">
								<radio-group @change="checkboxChange">
									<view v-for="(itme,index) in zhifu_list" :key="index" style="width: 670rpx;">
										<view style="display: flex;justify-content: space-between;width: 670rpx;align-items: center;">
											<view style="font-size: 28rpx;font-weight: bold;">{{itme.coup_name}}</view>
											<view>
												<checkbox :value="itme.coup_name" :checked="itme.checked" color="#FF7300"/>
											</view>
										</view>
										<view style="height: 2rpx;width: 670rpx;background: #EE7B30;margin: 20rpx 0;"></view>
									</view>
								</radio-group>
							</view>
						</view>
					</view>
					<view style="width: 670rpx;height: 80rpx;background: #FF7300;color: #FFFFFF;line-height: 80rpx;text-align: center;font-size: 35rpx;border-radius: 10rpx;" @tap.stop="danjie_zhifu">确认支付</view>
				</view>
			</view>
		</van-popup>
	</view>
</template>
<script>
export default {
	data() {
		return {
			originalPrice: "",
			user_id: "",
			mechanism_id: "",
			master_id: "",
			appointment_id: "",
			master_set_price_id: "",
			study_card_id: "",
			student_id: "",
			title: "",
			zhifu_list: [],
			coup_id: 0,
			num: 4,
			maskClickClose: false,
			maskAlpha: 0.9,
			yuanlai_money: "",
			panduan_name: "",
			guanbi: false,
			show: false,
			round: true
		};
	},
	reLaunch(){
		this.show = true
	},
	onLoad(option) {
		let me = this
		let itme = JSON.parse(decodeURIComponent(option.num))
		setTimeout(() => {
			this.originalPrice = itme.originalPrice
			this.yuanlai_money = itme.originalPrice
			if(itme.userCouponEntities != null){
				this.zhifu_list = itme.userCouponEntities
			}
		},10)
		setTimeout(() => {
			this.show = true
		}, 20)
		try{
			me.user_id = uni.getStorageSync('userif_list').user_id
		}catch(e){}
		this.mechanism_id = itme.mechanism_id
		this.master_id = itme.master_id
		this.appointment_id = itme.appointment_id
		this.master_set_price_id = itme.master_set_price_id
		this.study_card_id = itme.study_card_id
		this.student_id = itme.id
		this.title = itme.map.masterAppointment.title
	},
	onShow() {
		
	},
	methods: {
		checkboxChange: function (e) {
			var items = this.zhifu_list,
				values = e.detail.value;
				this.panduan_name = values
				this.gozhi(this.panduan_name)
			for (var i = 0, lenI = items.length; i < lenI; ++i) {
				const item = items[i]
				if(values.includes(item.coup_name)){
					this.$set(item,'checked',true)
				}else{
					this.$set(item,'checked',false)
				}
			}
		},
		gozhi(itme){
			if(itme != ""){
				this.zhifu_list.forEach((ite) => {
					if(ite.coup_name == itme){
						this.coup_id = ite.id
					}
					if(itme == "全免券"){
						this.originalPrice = 0
					}else{
						this.originalPrice = this.originalPrice*0.5
					}
				})
			}else{
				this.coup_id = 0
				this.originalPrice = this.yuanlai_money
			}
		},
		async	danjie_zhifu(){
				let me = this
				wx.login({
					success:(res) => {
						uni.request({
							url:"https://www.curiousmore.com/qmore/user/pay/payPre",
							method:"post",
							data:{
								user_id: me.user_id,
								rcharge_type: "study_card",
								source: "teach_paypal",
								course_num: "1",
								master_id:　me.master_id,
								member_duration:　12,
								rcharge_abstract:　"微信单节购买",
								studycard_id:me.master_set_price_id,
								study_type:"mechanism_offline",
								is_one_time_payment:"false",
								appointment_id: me.appointment_id,
								user_study_card_id: me.study_card_id,
								coupon_id: this.coup_id,
								points: "0",
								pay_type: "wx",
								mechanism_id: me.mechanism_id,
								user_appointment_id: me.student_id,
								rcharge_valid:res.code,
								title: me.title
							},
							header:{
								'content-type':'application/json',
							},
							success:(res_) => {
								if(res_.data.code == 0){
									if(this.coup_id == 0){
										wx.requestPayment({
											timeStamp:  res_.data.data.timeStamp,
											nonceStr:res_.data.data.nonceStr,
											package: res_.data.data.package,
											signType: 'MD5',
											paySign:  res_.data.data.paySign,
											success:(re) => {
												uni.showToast({
													title:"支付成功"
												})
												setTimeout(() => {
													uni.reLaunch({
													    url: '/pages/tabBer/newsshouye/newsshouye' 
													})
												}, 1000)
											},
											fail:(err) => {
												console.log(err)
											}
										})
									}else{
										uni.showToast({
											title:"支付成功"
										})
										setTimeout(() => {
											uni.reLaunch({
											    url: '/pages/tabBer/newsshouye/newsshouye' 
											})
										}, 1000)
									}
								}
							},
							fail:(err) => {
								uni.showToast({
									title:"未响应",
									icon:"none"
								})
							}
						})
					},
				})
			},
	}
};
</script>

<style scoped>
.banner {
	height: 240upx;
	width: 710upx;
}

.banner image {
	width: 710rpx;
	height: 240rpx;
}

.new-people .group-bd {
	display: flex;
	justify-content: space-between;
}

.new-people .list {
	padding-right: 30rpx;
}

.new-people .list .item {
	width: 180rpx;
	text-align: center;
}

.new-people .list .price {
	font-size: 24rpx;
}

.new-people .list .price .num {
	font-size: 34rpx;
	font-weight: bold;
}

.new-people .list button {
	font-size: 24rpx;
	background: #6170ff;
}

.new-people .list image {
	width: 180rpx;
	height: 180rpx;
	border: 1px dashed #cccccc;
}

.new-people .other {
	width: 230rpx;
}

.new-people .other image {
	width: 100%;
}

.group-seckill .left .iconfont {
	margin-right: 8rpx;
	color: rgb(226, 35, 26);
	font-size: 40rpx;
}

.group-seckill .list .item {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	width: 150rpx;
	height: 230rpx;
	border: 1px dashed #cccccc;
}

.group-seckill .list text {
	line-height: 60rpx;
	color: #e2231a;
}

.group-seckill .list image {
	width: 150rpx;
	height: 150rpx;
}

.group-hd .datetime .time {
	padding: 4rpx;
	background: #e2231a;
	color: #ffffff;
	border-radius: 4rpx;
}

.group-hd .datetime .point {
	padding: 0 10rpx;
	color: #e2231a;
}

.every-day-hard .list .item {
	width: 200rpx;
}

.every-day-hard .list image {
	width: 200rpx;
	height: 200rpx;
}

.every-day-hard .list .pic {
	position: relative;
	width: 200rpx;
	height: 200rpx;
	border: 1px dashed #cccccc;
}

.every-day-hard .list .tips {
	position: absolute;
	left: -1px;
	bottom: -1px;
	padding: 0 10rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	border-radius: 0 4rpx 0 0;
	color: #ffffff;
	background: #ff8a00;
	font-size: 22rpx;
}

.every-day-hard .list .tips .iconfont {
	margin-right: 6rpx;
	font-size: 24rpx;
	color: #ffffff;
}

.every-day-hard .list .tips .svg-icon {
	width: 20rpx;
	height: 20rpx;
	margin-right: 6rpx;
	color: #ffffff;
}

.every-day-hard .list .bottom-box {
	display: flex;
	height: 80rpx;
	justify-content: space-between;
	align-items: center;
}

.every-day-hard .list .bottom-box .people {
	font-size: 24rpx;
	color: #fb8138;
}

.every-day-hard .list .bottom-box .unit {
	font-size: 22rpx;
	color: #e2231a;
}

.every-day-hard .list .bottom-box .price {
	font-size: 30rpx;
	color: #e2231a;
}

.collection-box {
	position: fixed;
	width: 380rpx;
	padding: 20rpx;
	top: 20rpx;
	right: 20rpx;
	line-height: 40rpx;
	font-size: 24rpx;
	border-radius: 16rpx;
	background: #ffffff;
	border: 1px solid #eeeeee;
	box-shadow: 0 0 6rpx 0 rgba(0, 0, 0, 0.08);
}

.collection-box::after {
	position: absolute;
	content: '';
	display: block;
	right: 140rpx;
	top: -15rpx;
	transform: rotate(45deg);
	width: 30rpx;
	height: 30rpx;
	transform: rotate;
	background: #ffffff;
	border-left: 1px solid #eeeeee;
	border-top: 1px solid #eeeeee;
}

.collection-box .point {
	width: 20rpx;
	height: 20rpx;
	font-size: 60rpx;
	line-height: 0;
	color: #666666;
}

.collection-box .point-big {
	font-size: 80rpx;
}

.collection-box .close-btn {
	position: absolute;
	padding: 0;
	right: 10rpx;
	top: 10rpx;
	width: 40rpx;
	height: 40rpx;
	line-height: 30rpx;
	background: #ffffff;
	color: #999999;
	border-radius: 50%;
}

.follow-gzh {
	position: fixed;
	left: 0;
	right: 0;
	bottom: calc(var(--window-bottom));
	border-radius: 16rpx;
	box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.1);
	background: #ffffff;
	z-index: 10;
}

.follow-gzh .iconfont {
	display: block;
	position: absolute;
	right: 10rpx;
	top: 10rpx;
	z-index: 99;
}
</style>
